<template>
    <el-container style="height: 100%;">
        <el-header>
            <div>Vue、Element、SpringBoot权限管理系统</div>
            <div class="header-right">
                
                <el-dropdown placement="bottom-start">
                    <img src="../assets/images/avatar.jpg" alt="">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div class="header-time">
                    <div>欢迎你，张明</div>
                    <div>{{date}}</div>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="none">
                <el-menu
                    :collapse="isCollapse"
                    unique-opened
                    router
                    :collapse-transition="false"
                    :default-active="$route.path"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    
                    active-text-color="#409EFF">
                    <el-submenu :key="item.id" :index="item.path" v-for="(item) in menuList">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{ item.label }}</span>
                        </template>
                        <el-menu-item @click="openItem(children)" :index="children.path" :key="children.id" v-for="(children) in item.children">
                            {{ children.label }}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-container>
                    <el-main>
                        <i :class="[isCollapse?'el-icon-s-fold':'el-icon-s-unfold','arrow-icon']" @click="arrowBtn"></i>
                        <el-tabs v-model="activeTab" type="card" closable @tab-remove="tabRemove" @edit="handleTabsEdit" @tab-click="tabClick">
                            <el-tab-pane
                                :key="item.name"
                                v-for="(item) in tabList"
                                :label="item.title"
                                :name="item.name"
                            >
                                {{item.content}}
                            </el-tab-pane>
                        </el-tabs>
                        <router-view></router-view>
                    </el-main>
                    <el-footer>Copyright @ 2020-2030 All Rights Reserved</el-footer>
                </el-container>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
var $vueIndex;
export default {
    data(){
        return{
            date:'',
            // activeIndex:this.activeTab
            // menuList:[],
            // collapse:false
            // editableTabsValue: '2',
            // editableTabs: [
            //     {
            //         title: 'Tab 1',
            //         name: '1',
            //         content: 'Tab 1 content'
            //     }, 
            //     {
            //         title: 'Tab 2',
            //         name: '2',
            //         content: 'Tab 2 content'
            //     }
            // ],
            // tabIndex: 2
        }
    },
    computed:{
        ...mapState(['menuList','isCollapse','tabList']),
        activeTab:{
            set(){},
            get(){
                console.log("=="+this.$store.state.activeTab);
                return this.$store.state.activeTab
            }
        }
    },
    mounted(){
        
        $vueIndex = this;
        this.showTime();
        setInterval(function () {
            $vueIndex.showTime();
        }, 1000);
    },
    methods:{
        ...mapMutations(['changeCollapse','setActiveTab','addTabList','initTabList']),
        showTime() {
            var week = new Array(
                "星期日",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六"
            );
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var minutes = date.getMinutes();
            var second = date.getSeconds();
            this.date =
                year +
                "." +
                (month < 10 ? "0" + month : month) +
                "." +
                day +
                "" +
                " " +
                hour +
                ":" +
                minutes +
                ":" +
                (second < 10 ? "0" + second : second) +
                " " +
                (week[date.getDay()] || "");
        },
        arrowBtn(){
            this.$message.info('arrowBtn')
            this.changeCollapse();
        },
        handleOpen(){

        },
        handleClose(){

        },
        handleTabsEdit(){},
        tabRemove(targetName){
            console.log('tab-remove'+targetName);
            if(targetName == '/desktop'){
                return;
            }
            let tabs = this.tabList;
            let activeName = this.activeTab;
            if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1];
                    if (nextTab) {
                    activeName = nextTab.name;
                    }
                }
                });
            }

            console.log('tab-remove'+activeName);
            this.setActiveTab(activeName);
            this.$router.push(activeName,()=>{});
            this.initTabList({
                'tabList':tabs.filter((tab) => tab.name !== targetName),
                'activeTab':activeName
            });
        },
        tabClick(tab){
            // this.activeIndex()
            // console.log(tab,event);
            // this.activeIndex = tab.name;
            // this.setEditableTabsValue = this.activeIndex;
            this.setActiveTab(tab.name);
            // this.$router.push({'name':tab.name});
            this.$router.push(tab.name,()=>{});
        },
        openItem(children){
            let tab = {};
            tab.label = children.label;
            tab.name = children.path;
            this.addTabList(tab)
            // console.log(item.label);
            // this.$route.push({'name':tab.name})
        }
    }   
}
</script>
<style lang="scss" scoped>

.el-container{
    // border: 1px solid #f00808;
    height: 100%;
}
.el-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding:0;
    background-color: #167bd8;
}
// .el-aside{
//     width: 200px;
// }
.el-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgb(230,230,230);
}
.header-right{
    display: flex;
    align-items: center;
    width: 260px;
}
.header-right img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.header-time{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
    font-size: 15px;
    font-weight: 600;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.el-aside{
    border-right: 1px solid #ccc;
}
//解决图标不能点击的问题
.el-tabs__header{
    position: static;
}
.arrow-icon{
    float: left;
    background: #eaedf1;
    border: 1px solid transparent;
    font-size: 23px;
    height: 39px;
    line-height: 39px!important;
    width: 40px;
    text-align: center;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
.el-menu {
    border-right: none !important;
}
.el-main{
    padding: 0 0;
}
.el-main /deep/.el-tabs__header{
    position: static;
}
</style>